<template>
  <house-item :item="item" customStyle="background:#fff;margin:20rpx" :imageWidth="234" imageHeight="192">
    <template #right>
      <view class="u-flex-between u-flex-column u-flex-fill">
        <view class="house-name">
          {{item.title}}
        </view>
        <view class="house-desc" v-if="item.description">“{{item.description}}”</view>
        <view class="house-info">“{{item.space}}㎡ | {{item.house_type_text}} | {{item.space}}”</view>
        <view class="house-price u-flex-y-center u-flex-between">
          <text>市场价：{{item.market_price}}万</text>
          <text>优惠价：{{item.price}}万</text>
        </view>
      </view>
    </template>
  </house-item>
  <view class="form-box">
    <form-item :form-json="formJson" @handleSubmit="_house_hb"></form-item>

  </view>
</template>

<script setup>
  import houseItem from '@/components/house-item/house-item.vue';
  import formItem from '@/components/form-item/form-item.vue';
  import {
    ref,
    onMounted,
    nextTick
  } from 'vue';
  import { house_hb } from '../../../config/api';
  import { onLoad } from '@dcloudio/uni-app'
  const props = defineProps({
    id: {
      type: [Number, String],
      default: ''
    }
  })
  const formJson = ref([{
    label: '单次红包金额',
    placeholder: '请输入/元',
    key: 'hb_price',
    border: true,
    required: true,
    type: 'text'
  }, {
    label: '总计奖励次数',
    placeholder: '请输入',
    key: 'hb_number',
    border: true,
    required: true,
    type: 'text'
  }, {
    label: '总计金额',
    placeholder: '请输入',
    type: 'total_money',
  }])
  const item = ref({})
  onLoad((option) => {
    console.log(option)
    item.value = option
  })
  // 每日红包
  const _house_hb = (row) => {
    house_hb({ id: props.id, ...row }).then(res => {
      uni.$u.toast(res.msg)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }
</script>

<style lang="scss" scoped>
  .house-name {
    font-size: 26rpx;
    color: #333;
    font-weight: 800;
  }

  .house-info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;
  }

  .house-desc {
    font-size: 22rpx;
    color: #E47117;
  }

  .house-price {
    color: #DF0F0F;
    font-weight: 800;
    font-size: 24rpx;
  }

  .form-box {
    background: #fff;
    padding: 0 24rpx;
    margin: 0 24rpx;
    border-radius: 20rpx;

    ::v-deep .u-form-item__body__left__content__label {
      font-size: 30rpx;
      font-weight: 500;
    }

    ::v-deep .u-form-item__body {
      padding: 35rpx 0;
    }

    ::v-deep .u-form-item__body__left__content__required {
      left: auto;
      right: -12rpx;
    }

    ::v-deep .u-cell__body {
      padding: 35rpx 0;
    }
  }
</style>